<template>
  <div>
    <el-image :src="imgUrl" @click="edit" style="width: 360px;height: 200px;border-radius: 10px;" v-if="imgUrl" />
    <div v-else>
      <el-upload class="upload-demo" drag :headers="headers" :action="`${$apiHost}/common/upload`"
                 :on-success="onSuccess" accept=".jpg,.png,.jpeg">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div class="el-upload__tip" slot="tip">文件不超过{{ size }}MB</div> -->
      </el-upload>
    </div>
  </div>
</template>
<script>
import store from "../store";

export default {
  computed: {
    headers() {
      return {
        token: store.state.token
      };
    },
  },
  data() {
    return {

      imgUrl: ''
    }
  },
  methods: {
    edit() {
      this.imgUrl = ''
    },
    onSuccess(e) {
      this.imgUrl = this.$imgHost + e.data;
      this.$emit('url', e.data[0]);
    }
  }
}
</script>
